There is no canvas. 赤青メガネで見ると、ちょっとだけ立体的に見えるかも？

homepage6047　2020年 5月

プログラミングやRPG（作るほう）が好きな人の日記

このホームページは毎日 夜11時にアクセスできなくなります。 朝6時半に再開されます。（世の中のネット依存対策として） 「homepage6047.sakura.ne.jp」は 2020/7/1 に、「web6047.sakura.ne.jp」に変更予定です。 URL は https でもアクセスできます。 黒猫画像はクリック（タッチ）すると消えます。 NO PC WEEK とは私自身の健康のために私のパソコンの使用を制限する期間です。

2020/5/30（土）

ドラゴンモデル(再) 2 -[3dcgprogram]

Shade3D で作成したドラゴンを、自作の「FBX→JS 変換ツール」を使用して JavaScript で表示しました。

▼リンクをクリックすると別ウィンドウで JavaScript を実行します。

▼しかしよく見ると一部（頭など）表示がおかしいです。「向こう側の面が表示されていて、手前の面が表示されていない」状態です。

なんでか調べてみました。

▼Shade3D でこのようにして「法線を表示」させます。法線とは面の「うら・おもて」を示す線です。Shade3D に限らず他の 3DCG ソフトでも同様の機能はあると思います。

▼法線の様子。「赤い線が出ている面」は「表」を向いています。「線がなく赤い点だけの面」は「裏」を向いています。

（青い首：裏を向いている　頭と腕：表を向いている）

針治療みたいですね。

モデルの編集時点で「うら・おもて」バラバラで作っていたということです。

▼そしてしかも、編集中のモデルを右クリックしてポリゴンメッシュに変換すると…

▼…なぜか、一部の面（首、脳天部分）だけ「うら・おもて」が逆転します。

このおかしな状態で FBX で出力し、JavaScript へ変換＆表示した、ということです。

▼左（Shade3D）で裏を向いている面は、右（JavaScript）で表示されない。

おそらく Shade3D に限った問題だと思いますが、Shade3D 特有の「自由曲面」という種類の形状が、何かの拍子でおかしくなり、ポリゴンメッシュに変換したとき面の表裏が反転してしまうようになる…ようです。

そうなってしまった「自由曲面」を治すには、新しく自由曲面を作成し、元の自由曲面の下にあった「閉じた線形状」を新しい自由曲面に移動します。

2020/5/28（木）

ドラゴンモデル(再) -[3dcgprogram]

← 日記 2018/6/7（木）のドラゴン

このドラゴンを少し手直ししました。

思ったよりもいきいきとできるのが、3Dモデルの良いところですね。

日記 2018/6/7（木）のドラゴンとほとんど同じモデルなのにずいぶんと見え方が違いますよね。

躍動感のあるアクションポーズになっています。

「同じものなのにポーズ次第で魅力が異なる」という現象はガンプラでもよく知られています。

局地型ガンダム作りました!! あれ？…なんか弱そうだね。

局地型ガンダム作りました!! カッコイイ！

バンダイが2009年に発行したパンフレットでも「How To Play Action Pose」と銘打って「カッコよく立たせよう！」、「カッコよくポーズをとろう！」などと言っています。

もう10年以上前の小さなパンフレットですが、それでも著作権は存在しているし、バンダイはそのパンフレットをもとにして新しいコンテンツを改めてこれから作るということも考えられます（ガンプラにとって重要な事柄を記載しているので）。そのため無神経に掲載することはやはりできません。しかし低解像度であれば「こんなものがあった」という意味の「引用」になると思うので良いかなと思います。

パンフレットでは、どうやったらカッコイイポーズになるのかについてアドバイスをいくつか書いています。

そのなかで、”つま先は軽く開き、足首関節～ヒザ関節にかけては気持ち反るくらい（俗にいう「Sの字立ち」）が立ち姿を綺麗に見せるコツです” と書かれていますが、Sの字って言ったら、前にも紹介したこれですね。

3Dモデル、ガンプラ、そして人にも言えることですが、同じもの、同じ人なのにポーズ次第で魅力がこうも違うというのは驚きですね。

何か作って公開するときはカッコよくキメよう！

How To Play Action Pose HGガンダムVer.G30th ガンプラの楽しみはやはり自分で組み立てて完成させる、自分だけの作品であるということ。 せっかく時間をかけて頑張って完成させたガンプラ、格好よく展示してあげたいところです。 ここではHGガンダムVer.G30thを用いて、ガンプラを格好よく展示するコツをご紹介していきます。 ぜひ参考にして展示してみてください。
	①格好よく立たせよう！ まずしっかりと立たせます。 このとき足の幅は肩幅（肩アーマー）に合わせるぐらいがベスト。 つま先は軽く開き、足首関節～ヒザ関節にかけては気持ち反るくらい（俗にいう「Sの字立ち」）が立ち姿を綺麗に見せるコツです。 腹部はすき間が開かないようにします。 肩アーマーの位置をたれさせるのは×。 水平、好みによって上方に軽く角度を付けるぐらいがよいでしょう。 ヒジは軽く曲げ、腕部外側を気持ち見せるようにするのが○。 あごは軽く引いた位置に調整すれば、スタンダードな立ち姿の完成です。 ここから頭部の視線位置を変更してみたり、脚位置を少し変更してみたりと、自分なりの格好いい立ち姿を研究してみてください。
	②格好よくポーズをとろう！ アクションポーズで基本となるのはやはり ①ビーム・ライフルを構える ②ビーム・サーベルを振るというもの。 どちらも脚をしっかりと開き、武器と視線は可能な限り合わせます。 肩アーマーは気持ち上げ気味にしたほうがアニメ的な印象に決まります。 腹部はそのままよりも左右に振ったほうが、より躍動感のあるアクションポーズとなるでしょう。
	③アクションベースで展示してみよう！ 劇中では宇宙空間やジャンプによる空中戦など、宙に浮いた状態も多く見られます。 この再現には、別売の「バンダイ　アクションベース２」（４７３円～５２５円）が便利。 まず覚えておきたいのが基本的に同じ側の腕と脚は同時に出したり引いたりしない、ということ。 ライフルを構える場合、前に出るのは左足です。 地上でのアクションと同じく、腰を回しておくとダイナミックな印象となります。

2020/5/27（水）

パソコン作業「js/3DCG FBX→JS」 -[3dcgprogram]

このページの最初の表「NO PC WEEK に代わる PC 使用制限のしくみ（β版）」の右端に書かれている、

「js/3DCG FBX→JS」

の意味ですが、書く欄がせまいので略して書いてわかりづらくなっています。

js とは JavaScript のことで、略さずに書くと

『JavaScript によるプログラミングをしました。3DCG の FBX という形式のファイルを JavaScript のデータ型に変換するプログラムを作っています』

という意味です。

下図はその作業中のスクリーンショットです。（マルチディスプレイ）

(1) 右の大きいディスプレイのほうで 3Dモデリングソフトの Shade3D を表示しています。この Shade3D で FBX ファイルを出力します。

(2) 左の小さいディスプレイの左側が FBX→JS の変換を行う JavaScript プログラムの画面で、

(3) 右側が JavaScript のデータに変換した 3D モデルを JavaScript で表示しているところです。

この JavaScript による 3D モデルの表示には、いつものように、h = x * ( s / z ), v = y * ( s / z ) の 3DCG の原理の式を使っています。

内積や外積といった数学を用いて陰面消去を行ったり、光の疑似計算（ランバート反射という計算）を行って陰影を付けています。

上記3番の、表示の JavaScript を掲載しておきます。

下の画像リンクをクリックすると、新しいウィンドウで JavaScript を実行します。

ちょっとだけ表示が ちらついていて あやしいところもありますが、だいたい表示出来ています。

3DCG の原理の式 h = x * ( s / z ), v = y * ( s / z ) でここまでできるのはすごいことだと思います。

（回転するには、原理の式だけではできず、別途、三角関数の sin, cos を使う必要があります）

FBX→JS 変換ツールも掲載しておきます。

この変換ツールで変換するためには、3DCGソフトでモデルを作る際に

• たいていの3DCGソフトはモデルを階層構造にして整理することができると思いますが、階層構造を作らず、最上位にモデルを置くこと。
• モデルはポリゴンメッシュであること。
• テクスチャなどは無視され、対応しているのは「拡散反射色」のみ。

つまり、単純に最上位階層に置いた色付けしたポリゴンメッシュだけに対応しており、その他テクスチャなど凝った機能には対応していないということです。

そして、3DCGモデリングソフトからFBXを出力する際の条件は、

• フォーマットバージョンは　FBX 2012　を選ぶ
• バイナリではなくテキストを選ぶ

ほかにもいろいろと FBX には出力設定があり、3DCGソフトによっては上記２つの条件で出力し、掲載したツールの FBX: の欄に内容を貼り付けしたとしても、正常に JS に変換されるとは限りません。

ちょっと時間がなくて、そこまで対応できませんので、あしからず。

CONVERT ボタンで変換したら、下のテキストエリアの JavaScript をコピーして、テキストファイル face.js に貼り付けて、viewer.html で表示すれば3Dモデルが表示されるはずです。

一連のファイルをまとめた ZIP ファイルです。

FBX2JS_HTML.zip (60KB)

• converter.html　（fbx→js 変換ツール）
• viewer.html　（表示の JavaScript）
• face.fbx　（人の頭の3Dモデルです）
• face.js　（viewer.htmlはこれを読みこんでいる）
• sankakusikaku.fbx　（三角と四角の3Dモデルです）

ZIPをダウンロードしたらとりあえず、viewer.htmlをブラウザで表示してみてください。

次にconverter.htmlをブラウザで表示して、上の欄にsankakusikaku.fbxの内容（テキスト）をコピー＆貼り付けし、CONVERTボタン。

すると、下の欄に JavaScript が表示されます。その内容をすべてコピーしてface.jsの内容をすべて削除してから貼り付けし、face.jsを保存します。

viewer.htmlを更新すると▲と■が表示されます。

fbxファイルからjsファイルへの変換を体験できました。

実用としては、3DCGソフトで何かモデルを作ったら、JavaScriptでブラウザに表示できるということなので、ちょっと遊べるかもしれません、ということかな…。

3DCGソフトがFBX出力に対応していないかもしれないという問題や、この私が作ったツールの不備だとか、いろいろ問題がある状態ではありますが…(T_T;

2020/5/24（日）

久しぶりの晴れで近所の海へ散歩 -[dekake]

最近はずっと曇りや雨が続いていましたが、今日は久しぶりに晴れました。

NO PC WEEK の代替の表の通り、夜更かしせずちょっと早起きができたので、近所の海へ散歩に行ってきました！

家に帰ってパソコンの前に座ると、パソコンで何かを作るのも楽しいんだよな…。

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい。
  

2020/5/10（日）

母の日 -[season]

小学生の頃、私が何か絵を描くたびにほめてくれたし、おなじく小学生の頃、物の立体化（3DCG）のヒントも教えてくれたしで、イラストのちからを伸ばしてくれたのは、うちの母だと言ってもいいくらいです。

母の日になるとそのへんのことを思い出し、感謝しなきゃいけないといつも思います。

日頃から買い物しているお店で、”お店でもらえるポイント券で母の日のプレゼントと交換できる” という貼り紙が目にとまりました。

２つの品物を選べるようになっています。

母にメールでどちらの品物が良いか聞きましたが返事がなかったので、両方の品物を予約しました。（ポイント券はたくさんあったので）

それで品物は受け取って、段ボールに詰めて送ろうとしたんですが、品物だけじゃさびしいよな と思って簡単にメッセージを添えることにしました。

イラストAC でこのカーネーションのイラストを選んで、コピー用紙に印刷。

※この画像はイラストACの無料素材です

A4コピー用紙そのままだと大きすぎるので、A4用紙の半分のサイズになるように調整します。

A4 の半分のサイズに印刷する例（クリックすると開きます）

この余白にボールペンでメッセージを書こうとしたんですが迷いました。

「母の日おめでとう!」

と書こうとしましたが、不自然ではないか？と思い、「母の日　おめでとう」というキーワードで検索（リンクは検索サイトBingで検索）しました。

すると、

”「母の日おめでとう」はおかしい、感謝する日なのだから「ありがとう」でしょ”　という記事が２，３出てきました。

しかし、”「母の日おめでとう」という言葉は実際には使われている”　とも記事で書かれています。

どうして「母の日おめでとう」という言葉が不自然ながらも使われているのかについて、”英語の Happy Mother's Day の直訳が「母の日おめでとう」だから” と記事で書かれています。

しかし、それもあると思いますが、たぶん本当は　男の人の心理　によるものではないかと思います。

大の大人（男）が、

「お母さんありがとう」

…照れくさいでしょ。

そう書けないなら代わる言葉は？

「母の日おめでとう」

不器用でぶしつけではあるけど、花を添えたい気持ちを確かに表しているし、自分の照れくささも回避している便利なメッセージ。

そういうことですよ。

そんな感じでプレゼントを贈りました。

…が、それをやると父の日も贈らないといけなくなる…。

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい。
  

2020/5/7（木）

ゴールデンウィーク中にやっていたこと -[dekake]

毎日散歩を心掛けた

毎日家に こもっているよりは、ちょっとでも外に出るようにすると、生活は違うだろうなと思って毎日近所の海へ出かけて写真を撮ることにしました。GW8日間、毎日撮影しました。どれも大した写真ではありませんね。

4月29日（水）AM 6:38 波がおだやか。ソフトな感じがする。 今まで海を見ていてそう感じたことがない。	4月30日（木）AM 11:11	5月1日（金）AM 11:10 きれいだなぁ。 きれいだ。 天気もいいし。 ほっと癒される。
5月2日（土）AM 10:43 もやで地平線が見えない。 これも不思議な感じだなぁ。	5月3日（日）PM 14:03 おだやかだな。	5月4日（月）AM 9:50
5月5日（火）PM 13:30 なんちこたあない海だな。 海の上を飛べたら気持ちいいだろうな。	5月6日（金）AM 11:07 みんな（コロナウイルスで）暇そうで散歩に来てる。 寒い!! 綺麗に咲いてる気がする。 寒い! 寒いよぅっ!

毎日勉強を心掛けた

GWは毎日勉強しようと事前に決めていて、実行しました。

応用情報のストラテジ分野について勉強しました。

1. 応用情報技術者ドットコムの過去問道場にアクセス　→　ここ
2. 出題設定にて、「2.分野を指定して出題」を選び、「全項目チェック OFF」ボタンを押してから、「ストラテジ系」にチェックを入れて、「出題開始」ボタンを押す。
3. これで表示される問題を普通に解かずに、問題文を読んで頭に浮かんだ疑問についてひたすら自分で調べて答えを出していく。
   （先月４／１８（日）の日記で紹介した「勉強のしかた２：　ふと思った疑問をメモして、自分で調べて回答する」の勉強のしかたです）
4. 思うままに調べた後に問題を解く。

そういう勉強の方法で、ストラテジの問題を３３２問中６０問くらい解きました。

そのテキストファイル（勉強のノート代わり）がこれです。

「勉強のしかた２：　ふと思った疑問をメモして、自分で調べて回答する」

の具体的な例として見てください。皆さんの勉強のしかたの参考になると思い掲載しました。

自分の疑問（感情）をベースにしているので、後から読み返しても抵抗感が少ないです。

教科書の記述は形式ばっていて読むのはつらいものですが、自分の直の疑問（感情）をつづったものなら読めるでしょう。（復習しやすい）

しかし、試験日が決まっている場合や、勉強できる期間が決まっている場合は、あくまでもカリキュラムのとおりに勉強を進めないと試験当日に出題範囲を全部勉強してないとか、もっと勉強しなきゃいけなかったのに終わらなかった、という結果になってしまうので、カリキュラムはキープしていないといけません。

私は自己啓発で勉強しているだけなので、試験日も、勉強できる期間というのも何もありません。だからできる勉強方法なのかもしれません。

先月４／１８（日）の日記では、「勉強できる環境と、教えてくれる人。なかなか難しいですねぇ…。」と私は書きましたが、もしあなたが私のこのホームページを定期的に見てくれているなら、それこそが「勉強できる環境」です。

動物はみんな自分の周りで行われていることを自分も実行しようとするものです。（たとえば子は親を見て育つとか、「なんかみんな勉強してるから自分も勉強しないといけないかな？？！」みたいな気持ちとか）

私が勉強している様子をホームページに書いたなら、あなたももしかしたら勉強しようと思うかもしれません。それが「勉強できる環境」です。

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい。
  

2020/5/3（日）

NO PC WEEK に代わるもの -[no_pc]

NO PC WEEK の途中ですが、NO PC WEEK に代わる、良さそうな案があるので実行してみることにしました。

このページの最初に表示した表、「NO PC WEEK に代わる PC 使用制限のしくみ（β版）」がそれです。

あらかじめ時間を決めて、ネット上に公開することでパソコンのやりすぎを防止できるのでは？と考えました。

（訪問者のどんなニーズと この記事がつながるか）

• パソコンのやりすぎ、ネットゲームのやりすぎを何とかしたい。良い方法はないか。